import React from 'react';
import styles from './preview.less';
import {Icon} from 'antd';

class Preview extends React.Component {
    constructor() {
        super();
        this.state = {};
      }

      componentWillMount() {
        window.Isoption = false;
      }
      componentDidMount() {
        window.Isoption = true;
      }

      render() {
          const {
              backgroundColor, oemInfo, memberLogo, memberName, memberLevel, cardName, BackType, imageUrl,leftColor,checkbox, width,height,discount
            } = this.props;
          return (
              <div className={styles.content}>
                    <div className={styles.title}>
                        <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/phonebar.png" width={375} height={65}/>
                        <div>{this.props.title}</div>
                    </div>
                    <div
                    className={styles.mid}
                    style={BackType===1?{background:`linear-gradient(329deg,${backgroundColor}, ${leftColor})`}:
                            {
                                backgroundImage: `url(${oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + imageUrl +'?x-oss-process=style/240':''})`,
                                backgroundRepeat: 'no-repeat',
                                backgroundSize: 'cover'
                            }
                        }
                    >
                        <div className={styles.midTop}>
                            <div className={styles.left}>
                                <div className={styles.img}>
                                    <img src={oemInfo&&oemInfo.cdnUrl?oemInfo['cdnUrl'] + '/' + memberLogo +'?x-oss-process=style/240':''}/>
                                </div>
                                <div className={styles.leftMid}>
                                    <div>{memberName}</div>
                                    {/* <div>{memberLevel + '级会员'}</div> */}
                                    <div>等级卡</div>
                                </div>
                            </div>
                            <div>
                                <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon1.png" alt="" width={82} height={48}/>
                            </div>
                        </div>
                        <div className={styles.midFoot}>
                            <div className={styles.item}>
                                <div>有效期</div>
                                <div>长期有效</div>
                            </div>
                            <div className={styles.item}>
                                <div>卡名称</div>
                                <div>{cardName}</div>
                            </div>
                        </div>
                    </div>
                    <div className={styles.equity}>
                        <div className={styles.top}
                                style={checkbox.length=== 0?{borderBottom: 0}:{
                                    borderBottomWidth: 1,
                                    borderBottomStyle: 'solid',
                                    borderBottomColor: '#eee'
                                }}
                        >
                           <div>会员权益</div>
                           <Icon type="right" />
                        </div>
                        {checkbox.length> 0&&<div className={styles.midContent}>
                            {checkbox.indexOf('1')> -1 && (
                                <div>
                                    <div className={styles.img}>
                                        <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon2.2.png"/>
                                    </div>
                                    <div>包邮</div>
                                </div>
                            )}
                            {checkbox.indexOf('2')> -1 && (
                                    <div>
                                      <div className={styles.img}>
                                          <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon3.2.png"/>
                                      </div>
                                      <div>{discount + '折'}</div>
                                  </div>
                            )}
                            {checkbox.indexOf('3')> -1 && (
                                <div>
                                    <div className={styles.img}>
                                        <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon4.2.png"/>
                                    </div>
                                    <div>积分</div>
                                </div>
                            )}
                            {checkbox.indexOf('4')> -1 && (
                                <div>
                                    <div className={styles.img}>
                                        <img src="https://img.xiaokeduo.com/xkdnewyun/systemfile/store/mcard/membericon5.2.png"/>
                                    </div>
                                    <div>优惠券</div>
                                </div>
                            )}
                        </div>}
                    </div>
                    <div className={styles.foot}>
                        <div>
                            <div>使用须知</div>
                            <Icon type="right" />
                        </div>
                        <div>
                            <div>客服电话</div>
                            <Icon type="right" />
                        </div>
                    </div>
              </div>
          )
      }
}

export default Preview;
